Rodrigo

We can see the demo, the problem is that we can't save any changes we make to it in order to experiment and see if we can find a way to solve it. Sorry to reiterate this, but without a demo that we can tinker with, that clearly illustrates the problem, there is not a lot we can do to help. Once again my suggestion would be to strip this down to the bare minimum and start adding features and animations to it until you find what brakes it. Sorry I can't be of more assistance. Happy Tweening!

Hi, I've read this and checked your demo a few times and unfortunately I can't understand what you're referring to with this. Can you explain a bit more what's the issue you're seeing and how to reproduce it? Just use the same background color in the container of the cards and that should solve the issue. This most likely is related to subpixel rendering in browsers which is not at all related with GSAP. On top of that it seems you're using a very old helper function to create smooth scrolling. We strongly recommend using ScrollSmoother for that: https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Finally based on what I'm seeing you might want to check GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Hi, Here are a couple of demos that you can look at: https://codepen.io/GreenSock/pen/poBRQRj https://codepen.io/GreenSock/pen/PovzpJr Hopefully this helps. Happy Tweening!

Hi, The main issue is here: move.style.transform = "translateX(" + x + "px) translateY(" + y + "px)"; You're applying some styles to the transform property directly in the mousemove event handler, but GSAP is doing the same with the Timeline controlled by ScrollTrigger, hence the jump. Better leave all the work for GSAP, because GSAP is smart enough to animate each transform property independently without affecting any values. Here is a fork of your demo: https://codepen.io/GreenSock/pen/mdYKOwK Hopefully this helps. Happy Tweening!

Hi, The main issue here is that the useGSAP hook has no dependencies, so by defaults it uses an empty dependencies array, so it runs only when the component gets mounted, which is good, since there is no need in this particular case to run it everytime the state is updated. But you do have to refresh the ScrollTrigger instances after updating the state and that's when you can use a useGSAP hook with that isData state property and call ScrollTrigger.refresh() there, something like this: useGSAP( () => { const tl = gsap.timeline({ scrollTrigger: { trigger: footerRef.current, start: "top bottom", toggleActions: "play none none reverse", markers: true, }, }); let ctx = gsap.context(() => { tl.fromTo( footerRef.current, { opacity: 0 }, { opacity: 1, duration: 5, ease: "power3" } ); }, footerRef); return () => { ctx.revert(); }; }, { scope: footerRef } ); useGSAP( () => { ScrollTrigger.refresh(); }, { dependencies: [isData], } ); function handleChanges(boxId) { setIsData(isData.filter((d) => d.id !== boxId)); } You can replace the second useGSAP hook with a useLayoutEffect hook, but useGSAP is just a replacement for the useEffect/useLayoutEffect hooks with cleanup in it. Hopefully this helps. Happy Tweening!

Hi, You can definitely pin the same element more than once. As an FYI you can't mix the pin type or pinSpacing. Your demo has a fundamental design flaw though, the section you're pinning has the screen height, so it gets pinned by the first ScrollTrigger, then normal scroll resumes and it goes above the fold and then gets pinned again. So the element becomes pinned twice as expected, but the second time you can't see it because is not on the viewport, is above the viewport. See the problem? You should tinker with your HTML/CSS in order to achieve what you're aiming for. @Hideakimaru, thanks for helping out in the forums! Is great to see the community engaged and giving a hand! 💚. Just be careful with this approach: const tl = gsap.timeline(); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".UNPINED", start: "top bottom", markers: true }, display: "none" }); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".PINED", start: "bottom bottom", markers: true }, display: "flex" }); You shouldn't nest ScrollTrigger instances inside a child instance of a Timeline, as stated in the docs this could create unexpected logical issues: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Happy Tweening!

Hi, Maybe something like this: https://jsfiddle.net/asfjx8dL/ Hopefully this helps. Happy Tweening!

Hi, The main problem is in the d-none class you're using, since it has !important in it, if you remove that it works the way you expect. Here is a fork of your demo: https://codepen.io/GreenSock/pen/QWRxjBv Hopefully this helps. Happy Tweening!

Hi, You can watch this tutorial series by @Ihatetomatoes about using Barba and GSAP: Happy Tweening!

Hi I'm on my phone now so I can't check your demo, but based on the description this sounds more like a CSS issue. Have you tried your layout without Scrolltrigger? Basically the issue could be that there's no enough scrolling space available to trigger the animation and having the markers kind of fixes that. Another option could be that you have your Scrolltrigger instances created in a different order than they appear in the screen. Maybe try to check when all the images are loaded before creating the Scrolltrigger instances or refresh them afterwards. Also you can check if the sort() method helps: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Sorry I can't be of more assistance Happy Tweening!

Hi The onInterrupt callback is triggered when you kill an instance https://gsap.com/docs/v3/GSAP/Timeline/kill() In this case you're just adding new instances to the same timeline. Based on the description you have maybe a better approach could be to store the timeline in a variable and if you press another key reverse the timeline and then create a new timeline when the reverse is completed. Another option could be to kill the timeline, create a new animation that moves the note to it's original position and at the same time create the timeline again for the new note so both animations happen at the same time but at different speeds. Lots of options as you can see. If you need more help please create a minimal demo that clearly illustrates what you're trying to achieve. Happy Tweening!

Sorry but without a minimal demo that clearly illustrates the issue you're having there is not a lot we can do. My previous post sums all the alternatives I can think of by debugging blindly 🤷‍♂️ Happy Tweening

Hi @Ttanaka_720 and welcome to the GSAP Forums! This demo shows how to create route transitions in React using GSAP and our useGSAP hook: https://stackblitz.com/edit/react-6rzfpp As a recommendation, if you're just getting started I'd recommend you to start for something simpler and smaller, and then move up to route transitions. I'd recommend you to begin here: https://gsap.com/resources/React And check our Stackblitz starter templates as well: https://stackblitz.com/@GSAP-dev/collections/gsap-react-starters Hopefully this helps. Happy Tweening!

I only experienced that when exporting, not when copying the values of the paths, these were full-page artwork that needed to be in the final site so copy/pasting paths wasn't going to cut it. That meant that I was also exporting, masks, gradients and other defs on each artwork, which caused the name collision I mentioned before. I just took what the designer made and ported it to HTML, nothing more, but some odd behaviour in some masks and gradients caught my attention and discovered that using the same name for a mask in different paths, that were on different SVG tags was creating an issue. Happy Tweening!

Hi, In my experience porting SVG from figma to HTML I've seen that there could be some naming collisions between masks and clip-paths. Figma will just give a specific name based on the layer or something like that (can't remember how the figma naming convention works internally TBH), but you could have the same name in two elements and that could affect more than one path, even if those paths are in different SVG tags, so check any mask, path, gradients or anything in a <defs> tag, that could have a specific name that collides with another SVG export from figma. Hopefully this helps Happy Tweening!